<template>
  <div>
    <div class="add-btn">
      <a-button type="primary" @click="add">添加</a-button>
    </div>
      <a-select
        v-model:value="searchInfo.ww"
        placeholder="ee"
        @change="resetPage"
      >
        <a-select-option :key="" :label="" :value=""/>
      </a-select>
      
    
      <a-select
        show-search
        v-model:value="searchInfo.ww"
        placeholder="eeee"
        :default-active-first-option="false"
        :filter-option="false"
        :not-found-content="null"
        @search="confirmGetSdfAds"
        @change="resetPage"
      >
        <a-select-option
          v-for="d in sdfAdsList"
          :key="d.dd"
          :label="d.ss"
          :value="d.dd"
        />
      </a-select>
      
    
    <a-table
      :dataSource="list.dataSource"
      :columns="list.columns"
      :pagination="false"
      rowKey="id"
    >
      <template #handler="{record}">
        <a-row type="flex" justify="space-around">
          <a-button type="primary" @click="edit(record)">编辑</a-button>
          <a-button type="danger" @click="del(record)">删除</a-button>
        </a-row>
      </template>
    </a-table>
    <a-row style="margin-top: 20px" type="flex" justify="end">
      <a-pagination
        show-quick-jumper
        showSizeChanger
        v-model:pageSize="pagination.pagesize"
        v-model:current="pagination.page"
        :total="pagination.total"
        :showTotal="() => `共 ${pagination.total} 条数据`"
        @change="getList"
        @showSizeChange="getList"
      />
    </a-row>
    <!-- 添加弹窗 -->
    <detail
      v-model:visible="addPopup.visible"
      :title="addPopup.title"
      @confirm="confirmAdd"
    />
    <!-- 编辑弹窗 -->
    <detail
      v-model:visible="editPopup.visible"
      :title="editPopup.title"
      :form="editPopup.info"
      @confirm="confirmEdit"
    />
  </div>
</template>

<script>
import Detail from './components/detail'
import { reactive, toRefs, defineComponent } from 'vue'
import { message } from 'ant-design-vue';
import {
  apiGetGet,
  apiDeleteDel,
  apiEditPut,
  apiAddPost,
} from './api/index.js'
import _ from 'lodash-es';
export default defineComponent({
  name: '',
  component: { Detail },
  setup() {
    const state = reactive({
      list:{
        columns: [
        ],
        dataSource: [],
        loading: false,
        pagination:{
          pagesize: 10,
          page: 1,
          total: 0
        }
      },
      sdfAdsList:[],
      searchInfo: { 
      },
      addPopup: {
        visible: false,
        title: '添加',
      },
      editPopup: { 
        visible: false,
        title: '编辑',
        info: {}
      }
    })
    
    /**
     * 获取列表
     */
    const getList = async () => {
      try {
        state.list.loading = true
        const { pagesize, page } = state.list.pagination
        const { data } = await apiGetGet({
          pagesize,
          page,
          ...state.searchInfo
          // 搜索字段
        })
        // todo:传回的list可能需要更改
        state.list.dataSource = data.list;
        state.list.pagination.total = data.total
      } finally {
        state.list.loading = false;
      }
    };
    /**
     * 重置分页
     */
    const resetPage = () => {
      state.list.pagination.page = 1
      getList()
    };
    
    /**
     * 删除数据
     */
    const del = form => {
      apiDeleteDel(
        form.id
      ).then(res => {
        if(res.code === 200) {
          message.success('删除成功');
          getList();
        }
      })
    };
    
    /**
     * 弹出添加窗
     */
    const add = () => {
      state.addPopup.visible = true;
    };

    /**
     * 确认编辑
     */
    const confirmAdd = form => {
      apiAddPost(form).then(res => {
        if(res.code === 200) {
          message.success('编辑成功');
          getList();
        }
      })
    };
    
    /**
     * 弹出编辑窗
     */
    const edit = form => {
      state.editPopup.visible = true;
      state.editPopup.info = _.cloneDeep(form);
    }

    /**
     * 确认编辑
     */
    const confirmEdit = (form) => {
      apiEditPut(form).then(res => {
        if(res.code === 200) {
          message.success('编辑成功');
          getList();
        }
      })
    };

    
    const confirmGetSdfAds = (keyword) => {
      apiGetSdfAds({keyword}).then(res => {
        if(res.code === 200) {
          state.sdfAdsList = res.list
        }
      })
    };

    return {
      ...toRefs(state),
      getList,
      resetPage,
      del,
      edit,
      confirmEdit,
      add,
      confirmAdd,
      confirmGetSdfAds,
    }
  },
})
</script>

<style lang="less">
.add-btn {
  margin-bottom: 20px;
}
</style>
